/* 直接进入购物中心 */
.go 
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    right: 35px;
    top: 33px;
    z-index: 1001;
}
/* 继续往下更精彩 */
.more
{
    position: fixed;
    right: 60px;
    bottom: 80px;
    z-index: 1001;
    animation: sofa 0.4s linear infinite alternate;
}
/* 第一屏 */
.screen
{
    background: url('../images/01-bg.png') no-repeat center bottom;
}
.content
{
    width: 900px;
    height: 600px;
    /* background: rgba(0, 0, 0, 0.1); */
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -450px;
}
.screen .sofa 
{
    position: absolute;
    top: 200px;
    left: 200px;
    animation: sofa 0.8s linear infinite alternate;
}
.screen .goods
{
    position: absolute;
    bottom: 100px;
    right: 40px;
}
.screen .fly 
{
   position: absolute;
   right: -50px;
   top: 20px;
   animation: fly 1s linear infinite alternate;
}
@keyframes fly {
    from{
        transform: translateY(-30px);
    }
    to{
        transform: translateY(30px);
    }
}

@keyframes sofa {
    from{
        transform: translateY(-20px);
    }
    to{
        transform: translateY(20px);
    }
}

/* 第二屏 */
.screen01 {
    background: url('../images/02-bg.png') no-repeat center bottom;
}
.screen01 .goods 
{
    position: absolute;
    left: 50%;
    margin-left: -221px;
    bottom: 210px;
    transform-origin: right bottom;
    transform: scale(0);
}
.screen01 .sofa {
    transform: scale(0.5);
    transform-origin: right top;
    position: absolute;
    left: 289px;
    top: 132px;
    opacity: 0;
    z-index: 1001;
}
.screen01 .input
{
    position: absolute;
    right: 141px;
    top: 113px;
    transform-box: right top;
    opacity: 0;
}
.screen01 .input .key
{
    position: absolute;
    left: 100px;
    top: 6px;
    opacity: 0;
}
.screen01 .text
{
    text-align: center;
}
.screen01 .text .text02
{
  position: absolute;
  opacity: 0;
}
.screen01.now .text .text02
{
    position: static;
    opacity: 1;
    transition: opacity 1s;
}
.screen01.now .text .text01
{
    position: absolute;
    opacity: 0;
}
.screen01.now .input
{
    animation: input01 3s linear forwards;
}
.screen01.now .input .key
{
    opacity: 1;
    transition: all 1s linear 1s;
}
.screen01.now .goods
{
    transform: none;
    transition: all 1s linear 2s;
}
@keyframes input01
{
    0% {
        opacity: 1;
        transform: translate(2000px,143px);
    }
    33% {
        transform: translate(-200px,143px);
    }
    67% {
        transform: translate(-200px,143px);
    }
    100% {
        opacity: 1;
        transform: scale(0.7); 
    }
}

/* 第二屏离开的动画 */
.screen01.leaved .sofa
{
    animation: sofa01 1s linear;
}
@keyframes sofa01
{
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translate(-80px, 700px);
    }
}
/* 第三屏 */
.screen02
{
    background: url('../images/03-bg.png') no-repeat center bottom;
}
.screen02 .change
{
    position: absolute;
    right: 113px;
    bottom: 165px;
}
.screen02 .change02
{
    position: absolute;
    opacity: 0;
}
.screen02 .cart
{
    position: absolute;
    right: 192px;
    bottom: 90px;
}
.screen02 .cart02
{
    position: absolute;
    opacity: 0;
}

.screen02 .sofa
{
    position: absolute;
    left: 209px;
    bottom: 232px;
    display: none
}
.screen02.now .sofa
{
   display: block;
   z-index: 1001;
}
.screen02.now .cart01
{
    display: none;
}
.screen02.now .cart02
{
    position: static;
    opacity: 1;
    transition: all 1s linear;
} 
.screen02.now .change01
{
    display: none;
}
.screen02.now .change02
{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}
/* 第三屏到第四屏的动画 */
.screen02.leaved .sofa
{
   animation: sofa02 1s linear;
}
@keyframes sofa02
{
    from{}
    to{
        transform: translate(197px, 643px) rotate(45deg);
    }
}
/* 第四屏 */
.screen03
{
    background: url('../images/04-bg.png') no-repeat center bottom;
}
.screen03 .cloud
{
    position: absolute;
    top: -20px;
    left: -400px;
}
.screen03.now .cloud
{
    animation: cloud 9s linear infinite alternate;
}
@keyframes cloud
{
    from{}
    to{
        transform: translateX(1000px);
    }
}
.screen03 .text
{
    text-align: center;
    margin-top: 120px;
}
.screen03 .text img:last-child
{
    position: absolute;
    opacity: 0;
}
.screen03 .cart
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 45px;
}
.screen03 .cart img:last-child
{
    position: absolute;
    top: 1px;
    left: 160px;
    transform: rotate(45deg);
    z-index: -1;
    display: none;
}
.screen03 .address
{
    position: absolute;
    left: 50%;
    width: 283px;
    height: 270px;
    transform: translateX(-50%);
    bottom: 150px;
    display: none;
}
.screen03 .address img:last-child
{
    position: absolute;
    top: 60px;
    left: 60px;
    display: none;
}
.screen03.now .cart
{
    transition: all 3s;
    transform: translateX(1000px);
}
.screen03 .text.show img:first-child
{
    position: absolute;
    opacity: 0;
}
.screen03 .text.show img:last-child
{
    position: static;
    opacity: 1;
    transition: all 1s;
}
.screen03.now .cart img:last-child
{
    display: block;
}

.screen03 .address.show 
{
    display: block;
}

/* 第五屏 */
.screen04
{
    background: url('../images/05-bg.png') no-repeat center bottom;
}
.screen04 .content
{
    height: 100%;
}
.screen04 .text
{
    position: absolute;
    top: 50px;
    left: 0;
}
.screen04 .card
{
    position: relative;
    top: 220px;
    z-index: 1002;
}
.screen04 .card .cardImg
{
    position: absolute;
}
.screen04 .card .orderImg
{
    position: absolute;
    top: -80px;
    left: 130px;
    z-index: -100;
    transform: translateY(150px);
}
.screen04 .sofa
{
    position: absolute;
    left: 100px;
    bottom: 100px;
    transform: rotate(30deg);
    opacity: 0;
    z-index: 1001;
}
.screen04 .mouse
{
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 400px;
}
.screen04 .mouse .m1,
.screen04 .mouse .m2
{
    position: absolute;
    bottom: 320px;
    right: 0;
}
.screen04 .mouse .hand
{
    position: absolute;
    right: 56px;
    bottom: 100px;
    transform: translateY(500px);
}
.screen04 .mouse .m2 
{
    opacity: 0;
}
/* 动画 */
.screen04.now .mouse .hand
{
    transform: none;
    transition: all 1s linear;
}
.screen04.now .mouse .m2
{
    opacity: 1;
    transition: all 0.2s linear 1s;
}
.screen04.now .sofa
{
    animation: sofa04 1s linear 1.2s forwards;
}
@keyframes sofa04
{
    0%{
        opacity: 1;
        transform: translateY(-1000px) rotate(30deg);
    }
    50%{
        transform: translateY(-150px) rotate(30deg);
    }
    100%{
        opacity: 1;
        transform: rotate(30deg);
    }
}
.screen04.now .card .orderImg
{
    transform: none;
    transition: all 1s linear 1.2s;
}
/* 第五屏到第六屏的动画 */
.screen04.leaved .sofa
{
    animation: sofa05-06 1s linear;
}
@keyframes sofa05-06
{
    from{
        opacity: 1;
        transform:  rotate(30deg);
    }
    to{
        opacity: 1;
        transform: translate(50px,420px) scale(0.2) rotate(30deg);
    }
}

/* 第六屏 */
.screen05
{
    background: url('../images/06-bg.png') no-repeat 25% bottom;
}
.screen05.now
{
    background: url('../images/06-bg.png') no-repeat 100% bottom;
    transition: background 1s linear 1s;
}
.screen05 .cloud
{
    position: absolute;
    left: 0;
    top: -10px;
}
.screen05.now .cloud img:first-child
{
    animation: cloud05 40s linear infinite alternate;
}
.screen05.now .cloud img:last-child
{
    position: absolute;
    left: 0;
    top: 0;
    animation: cloud05 20s linear infinite alternate;
}
@keyframes cloud05
{
    from{}
    to{
        transform: translateX(1000px);
    }
}

.screen05 .text
{
    position: absolute;
    left: 200px;
    top: 80px;
}
.screen05 .text img:last-child
{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.screen05.now .text img:first-child{
    opacity: 0;
    transition: all 0.1s linear 4.6s;
}
.screen05.now .text img:last-child{
    opacity: 1;
    transition: all 1s linear 4.6s;
}
.screen05 .box
{
    position: absolute;
    top: 140px;
    left: 200px;
    z-index: 1002;
}
.screen05 .box.show{
    animation: box05 2s linear forwards;
}
@keyframes box05
{
    from{
        opacity: 1;
        transform: translateX(-500px);
    }
    50%{
        transform: none;
    }
    to {
        opacity: 1;
        transform:translateY(330px) scale(0.3);
    }
} 

.screen05 .car
{
    position: absolute;
    left: 200px;
    bottom: 0;
    z-index: 1003;
}
.screen05 .car img
{
    opacity: 0;
}
.screen05 .car .carImg
{
    opacity: 1;
}

.screen05 .car .buyerImg,
.screen05 .car .addressImg
{
    position: absolute;
    right: -20px;
    bottom: 120px;
}
.screen05.now .car .buyerImg
{
    opacity: 1;
    transition: all 0.25s linear 1.25s;
}
.screen05.now .car .addressImg
{
    opacity: 1;
    transition: all 0.25s linear 1.75s;
}
.screen05 .car .workerImg
{
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scale(0);
    transform-origin: left bottom;
}
.screen05.now .workerImg
{
    animation: worker05 2.1s linear 2s forwards;
}
@keyframes worker05
{
    from{
        opacity: 1;
    }
    33%{
        transform: scale(1);
    }
    67%{
        transform: scale(1) translateY(-100px);
    }
    100%{
        opacity: 1;
        transform: scale(1) translateY(-100px) translateX(100px);
    }
}
.screen05 .car .sayImg
{
    position: absolute;
    right: -220px;
    bottom: 360px;
}
.screen05.now .sayImg
{
    opacity: 1;
    transition: all 1s linear 4s;
}
.screen05 .woman
{
    position: absolute;
    width: 106px;
    height: 150px;
    right: 50px;
    bottom: 116px;
}
.screen05 .woman .doorImg
{
    opacity: 0;
}
.screen05 .woman .personImg
{
   position: absolute;
   right: 0;
   bottom: 0;
   transform-origin: right bottom;
   transform: scale(0);
}
.screen05.now .woman .doorImg
{
    opacity: 1;
    transition: all 0.4s linear 4.6s;
}
.screen05.now .woman .personImg
{
    transform: none;
    right: 150px;
    transition: all 0.4s linear 5s,right 0.5s linear 5.5s;
}

/* 第七屏 */
.screen06 
{
    background: url('../images/07-bg.png') no-repeat center bottom;
}
.screen06 .text 
{
    position: absolute;
    left: 161px;
    bottom: 375px;
    transform-origin: left bottom;
    transform: scale(0);
}
.screen06 .text.show
{
    animation: text06 1.5s linear 2.3s forwards;
}
@keyframes text06
{
    from{}
    50%{
        transform: scale(1.5);
    }
    to{
        transform: none;
    }
}
.screen06 .star
{
    position: absolute;
    left: 151px;
    top: 142px;
}
.screen06 .star img
{
    float: left;
    margin-left: 6px;
    opacity: 0;
}
.screen06 .star.show img{
    opacity: 1;
    transition: all 0.3s linear;
}

/* 第八屏 */
.screen07
{
    background: url('../images/08-bg.png');
}
.screen07 .btu
{
    width: 389px;
    height: 160px;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}
.screen07 .btu img:last-child
{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.screen07 .btu:hover img:last-child
{
    opacity: 1;
}
.screen07 .again
{
    position: absolute;
    top: 80px;
    right: 0;
}
.screen07 .hand
{
    position: absolute;
    left:50%;
    top: 100px;
    transform: translateX(-50%);
}





